<template>
  <div>
    <!-- header -->
    <console-header></console-header>
    <!-- 考勤 -->
    <el-row style="margin-left:30px;margin-top:20px;">
      <el-col :span="12"><h4>本周考勤</h4></el-col>
      <el-col :span="11" :offset="1"><h4>本周缺勤名单</h4></el-col>
    </el-row>
    <el-row style="margin-left:30px;">
      <el-col :span="12">
        <el-card>
            <el-table :data="weekAttend" style="width: 100%" fit>
          <el-table-column prop="date" label="时间" align="center">
          </el-table-column>
          <el-table-column prop="sum" label="总人数"  align="center">
          </el-table-column>
          <el-table-column prop="attend_count" label="出勤人数" align="center">
          </el-table-column>
          <el-table-column prop="absent_count" label="缺勤人数"  align="center"> </el-table-column>
          <el-table-column prop="late_count" label="迟到人数" align="center">
          </el-table-column>
          <el-table-column prop="in_count" label="入职人数" align="center">
          </el-table-column>
          <el-table-column prop="out_count" label="离职人数" align="center">
          </el-table-column>
          <el-table-column prop="attend_rate" label="出勤率" align="center">
          </el-table-column>
        </el-table>
      </el-card>
      </el-col>
      <el-col :span="9" :offset="1">
        <el-card>
        <el-table :data="absentStatus" style="width: 100%" fit>
          <el-table-column prop="Id" label="员工ID" align="center">
          </el-table-column>
          <el-table-column prop="name" label="姓名"  align="center">
          </el-table-column>
          <el-table-column prop="position" label="职务" align="center">
          </el-table-column>
          <el-table-column prop="absent_count" label="缺勤次数"  align="center"> </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" style="margin-top:20px;"></el-pagination>
      </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import consoleHeader from "@/components/console-header.vue";
import {getWeekAttend,getAbsentStatus} from '@/api/attendance'

export default {
  components: { consoleHeader },
  data() {
    return {
      //本周考勤
      weekAttend:[],
      //缺勤统计
      absentStatus: [],
      total:0
    };
  },
  mounted(){
    this.getWeekAttend()
    this.getAbsentStatus()
  },
  methods:{
    async getWeekAttend(){
      const res = await getWeekAttend("123")
      if(res.code===200){
        this.weekAttend=res.data.weekAttend
      }
    },
    async getAbsentStatus(){
      const res = await getAbsentStatus("123")
      if(res.code===200){
        this.absentStatus=res.data.absentStatus
        this.total=res.data.total
      }
    }
  }
};
</script>
